<template>
    <header class="homePageHeader">
        <div class="headerLogo">
            <img src="../../public/pic/logo(trans).png" />
        </div>
        <div class="headerNav">
            <ul>
                <li v-for="navData in headerNavData" :key="navData"><a href="#">{{ navData }}</a></li>
            </ul>
        </div>
        <div class="headerSearch">
            <input type="text" name="headerSearch" placeholder="输入关键词" class="searchInput">
            <img src="../../public/pic/fa-search.jpg" />
        </div>
        <div class="headerIndividual">
            <div class="individualImg">
                <img src="../../public/pic/20130502185029_EkKYh拷贝.jpg" />
            </div>
            <div class="nickname">
                <span>{{uname}}</span>
            </div>
        </div>
    </header>
</template>

<style scoped>

    * {
        margin: 0;
        padding: 0;
    }

    li {
        list-style: none;
    }

    .homePageHeader {
        height: 42px;
        margin: 30px auto;
    }

    .headerLogo {
        float: left;
        height: 42px;
        width: 198px;
    }

    .headerNav {
        float: left;
        margin-left: 60px; 
    }

    .headerNav ul li {
        float: left;
        margin: 0 15px;
    }

    .headerNav ul li a {
        display: block;
        padding: 0 10px;
        height: 42px;
        line-height: 42px;
        font-size: 18px;
        text-decoration: none;
        color: #050505;
    }

    .headerNav ul li a:hover {
        border-bottom: 2px solid #00a4ff;
        color: #00a4ff;
    }

    .headerSearch {
        float: left;
        margin-left: 70px;
        height: 42px;
        width: 412px;
        line-height: 42px;
    }

    .headerSearch .searchInput {
        float: left;
        border: 1px solid #00a4ff;
        border-right: none;
        padding-left: 15px;
        height: 40px;
        width: 345px;
        color: #bfbfbf;
        font-size: 14px;
    }

    .headerSearch img {
        display: block;
        float: left;
        width: 50px;
        height: 42px;
        border: 0;
    }

    .headerSearch .searchInput:focus, .headerSearch img:focus {
        outline: none;
        color: black;
    }

    .headerSearch img:hover {
        cursor: pointer;
    }

    .headerIndividual {
        float: left;
        margin-left: 30px;
        width: 135px;
        height: 42px;
    }

    .headerIndividual .individualImg {
        float: left;
        line-height: 66px;
    }

    .headerIndividual .individualImg img {
        border-radius: 50%;
    }

    .headerIndividual .nickname {
        float: left;
        margin-left: 5px;
        line-height: 42px;
        color: #666666;
        font-size: 14px;
    }

</style>

<script>

    export default {
        data() {
            return {
                headerNavData: ["首页", "课程", "职业规划"]
            }
        },
        props: ['uname']
    }

</script>